<template>
    <div class="app-container">
       <el-form  ref="queryRef" :inline="true" v-show="showSearch">
          <el-form-item label="">
             <el-input
                v-model="groupId"
                placeholder="群组ID"
                clearable
                style="width: 200px"
             />
          </el-form-item>
          <el-form-item>
             <el-button type="primary" @click="handleAddGroup">新增</el-button>
          </el-form-item>
       </el-form>
       <el-row :gutter="10" class="mb8">
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
       <el-table
          v-loading="loading"
          :data="menuList"
       >
          <el-table-column prop="icon" label="群组头像" align="center">
             <template #default="scope">
                <svg-icon :icon-class="scope.row.icon" />
             </template>
          </el-table-column>
          <el-table-column prop="menuName" label="群组ID" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="orderNum" label="群组名称"></el-table-column>
          <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
             <template #default="scope">
                <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
             </template>
          </el-table-column>
       </el-table>
       <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="pageObj.pageNumber"
          v-model:limit="pageObj.showNumber"
          @pagination="getList"
       /> 
    </div>
 </template>
 
 <script setup name="defaultGroup">
 import { getDefaultGroupList } from "@/api/chat/defaultGroup";
 import SvgIcon from "@/components/SvgIcon";
 import IconSelect from "@/components/IconSelect";
 
 const { proxy } = getCurrentInstance();
 const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
 
 const menuList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const title = ref("");
 const menuOptions = ref([]);
 const isExpandAll = ref(false);
 const refreshTable = ref(true);
 const iconSelectRef = ref(null);
 const total = ref(0);
 const groupId = ref();
 
 const data = reactive({
   form: {},
   queryParams: {
    current: 1,
    pageSize: 10,
   },
   pageObj:{
      pageNumber: 1,
      showNumber: 10,
   },
   rules: {
     menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
     orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
     path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
   },
 });
 
 const { queryParams, form, rules, pageObj } = toRefs(data);
 
 /** 查询菜单列表 */
 function getList() {
   loading.value = true;
   const params = {
      pagination: data.pageObj,
      ...data.queryParams
   }
   getDefaultGroupList(params).then(response => {
    menuList.value = response.data.groups;
    total.value = response.data.total;
    loading.value = false;
   });
 }
 function handleAddGroup (){

 }
 
 /** 取消按钮 */
 function cancel() {
   open.value = false;
   reset();
 }
 
 /** 表单重置 */
 function reset() {
   form.value = {
     menuId: undefined,
     parentId: 0,
     menuName: undefined,
     icon: undefined,
     menuType: "M",
     orderNum: undefined,
     isFrame: "1",
     isCache: "0",
     visible: "0",
     status: "0"
   };
   proxy.resetForm("menuRef");
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
   getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
 
 /** 新增按钮操作 */
 function handleAdd(row) {
   reset();
   if (row != null && row.menuId) {
     form.value.parentId = row.menuId;
   } else {
     form.value.parentId = 0;
   }
   open.value = true;
   title.value = "添加菜单";
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
  //  proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {
  //    return delMenu(row.menuId);
  //  }).then(() => {
  //    getList();
  //    proxy.$modal.msgSuccess("删除成功");
  //  }).catch(() => {});
 }
 
 getList();
 </script>
 